	var $dropT = $('#dropDivT');
	var $dropQ = $('#dropDivL');
	var $dropS = $('#dropDivS');

	// get position of the element we clicked on
	var offset = $('#tetris').offset();

	// get width/height of click element
	var h = $('#tetris').outerHeight();
	var w = $('#tetris').outerWidth();

	// get width/height of drop element
	var ht = $dropT.outerHeight();
	var wt = $dropT.outerWidth();
	
	var hl = $dropQ.outerHeight();
	var wl = $dropQ.outerWidth();
	
	var hs = $dropS.outerHeight();
	var ws = $dropS.outerWidth();

	// determine middle position
	var initLeftT = offset.left + ((w/3) - (wt/3));
	var initLeftL = offset.left + (w - (wl));
	var initLeftS = offset.left + (w - (ws * 1.35));


function  dropT() {
    // animate drop
	$dropT.css({
            left: initLeftT,
            top: $(window).scrollTop() - ht,
            display: 'block'
        }).animate({
            left: initLeftT,
            top: (offset.top - ht) + ht,
        }, 2500, dropS);
}

function dropS(){
	$dropS.css({
        left: initLeftS,
        top: $(window).scrollTop() - hs,
        display: 'block'
    }).animate({
        left: initLeftS,
        top: (offset.top - hs) + hs*1.5,
    }, 2500)
    .animate({
        left: 120,
    }, 200, dropQ);
}

function dropQ(){
	$dropQ.css({
        left: initLeftL,
        top: $(window).scrollTop() - hl,
        display: 'block'
    }).animate({
        left: initLeftL,
        top: (offset.top - hl) + hl*2,
    }, 2500, reset);
}

function reset(){
	dropT();
	$dropS.hide();
	$dropQ.hide();
}

$(document).ready(function() {	
	dropT();
});
